<template>
  <div class="app-container" @click="hideContextMenu">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             style="margin-left: 20px;">
      <el-form-item label="品牌" prop="fansBrand">
        <el-input
          v-model="queryParams.fansBrand"
          clearable
          placeholder="请输入气体交换机品牌"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="型号" prop="fansType">
        <el-input
          v-model="queryParams.fansType"
          clearable
          placeholder="请输入气体交换机型号"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="栏舍编码" prop="queryParams">
        <el-select v-model="queryParams.phouseCode" clearable filterable placeholder="请输入设备编码"
                   @keyup.enter.native="handleQuery"
        >
          <el-option

            v-for="item in purchaseList"
            :key="item.phouseCode"
            :label="item.phouseCode"
            :value="item.phouseCode"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--    保留新增  去掉修改和删除-->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改
              </el-button>
            </el-col>-->
      <!--      <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>-->
      <el-col :span="1.5">
        <el-button
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!--    去掉 列表形式 转换成盒子模块形式-->
    <el-row :gutter="20">
      <el-col :span="1" style="margin-top: 100px;margin-left: 20px">
        <svg class="icon" height="100" p-id="7126" t="1708502749876" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goleft">
          <path
            d="M745.09774 1024L232.934734 512.163005 745.09774 0l45.967526 45.967526-465.869468 466.195479L791.065266 978.032474l-45.967526 45.967526z"
            fill="#dbdbdb" p-id="7127"></path>
        </svg>
      </el-col>
      <el-col :span="20">
        <div class="scroll-container" @wheel="handleWheel">
          <el-row :gutter="20" class="table-body" style="margin-left: 20px;margin-right:20px ">
            <el-col v-for="(item, index) in purchaseList" :key="index"
                    :span="5"
                    class="function-card emessage-div"
                    style="margin-top: 20px"

            >
              <div @click="showDetails(item)"
                   @contextmenu.prevent="$event.preventDefault(); showContextMenu($event, item)">
                <el-card :body-style="{ padding: '0px' }" class="parent-icon" shadow="hover">

                  <i v-if="item.fansState==='1'" class="el-icon-success green-icon" title="运行"
                     @click.stop="icoeUp(item)"></i>
                  <!-- 否则，显示el-icon-circle-cross图标 -->
                  <!--            <i v-else-if="item.fansState==='2'" class="el-icon-warning orange-icon" @click.stop="icoeUp(item)"
                                 title="故障"></i>-->
                  <i v-else-if="item.fansState==='2'" class="el-icon-error rea-icon" title="关闭"
                     @click.stop="icoeUp(item)"></i>


                  <!--              <img src="/src/assests/images/scrape.png" height="140"/>-->
                  <svg class="icon" height="140" p-id="9377" t="1708426189935"
                       version="1.1"
                       viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M430.00015 252.23a257 257 0 1 1-100.41 20.25A256.36 256.36 0 0 1 430.00015 252.23m0-42c-165.68 0-300 134.31-300 300s134.32 300 300 300 300-134.32 300-300-134.31-300-300-300zM862.57015 241.54l49 0.83a1.05 1.05 0 0 1 0 1.39l-49.51 50H1023.00015a1 1 0 0 1 1 1v36a1 1 0 0 1-0.31 0.72 0.94 0.94 0 0 1-0.66 0H862.11015l49.51 49.06a1.05 1.05 0 0 1 0 1.39l-49 0.83c-0.22 0.22-18.71-18.23-36.92-36.24l-4.36-4.31L817.00015 338a0.57 0.57 0 0 1-0.51 0l-25-25.12a1 1 0 0 1 0-1.39l25-25.12a0.57 0.57 0 0 1 0.51 0c20.27-20.22 45.31-44.83 45.57-44.83z"
                      p-id="9378"></path>
                    <path
                      d="M615.47015 453.12c-6.4-15.17-22.94-33.43-37-35.39-11.06-1.55-26.32 18.78-37.79 30.95a448.16 448.16 0 0 0-30.31 40.75L474.21015 441c8.14-13.15 17.2-25.33 23.75-38.74 23.14-47.3 0.31-91.92-51.2-92.85a207.28 207.28 0 0 0-86 19.34c-36.71 16.77-35.33 43.18-1.13 64.85 16.28 10.31 31.69 21.92 49.41 34.25L359.42015 465c-12-7.69-22.53-15.48-34.05-21.56-53.51-27.7-97.69-0.73-95 60.25a211.5 211.5 0 0 0 18.89 75.78c17 37.55 40.09 37.14 63.7 2.47 11.31-16.56 23.29-32.65 36.91-51.58 7 12.53 10.24 20.32 15.36 27.08 5.43 7.64 12 14.34 18.94 22.44a449.34 449.34 0 0 0-25 43.49c-20.48 46.94 4.25 88.52 55 87.69A260.32 260.32 0 0 0 495.00015 694.58c12-4.17 27.8-20.63 27.5-31-0.41-12.38-14.85-25.79-25.6-36.11-13.72-12.79-30.06-22.8-46.39-34.76L498.00015 557.83c16.54 8.88 30.72 18.32 46.08 24.35 47.62 18.67 86.22-6.45 85.71-57.77a191.26 191.26 0 0 0-14.32-71.29z m-145.25 62.34c-1.23 20.17-18.69 35.23-40.14 34.46A39.63 39.63 0 0 1 391.00015 510.4c0-19.19 20.48-38.22 41-37.86a39.9 39.9 0 0 1 28 13.33 40.53 40.53 0 0 1 10.22 29.59zM862.57015 442.72l49 0.83a1.05 1.05 0 0 1 0 1.39L862.11015 495H1023.00015a1 1 0 0 1 1 1v35.64a1.08 1.08 0 0 1-1 1H862.11015L911.62015 582a1.05 1.05 0 0 1 0 1.39l-49 0.83c-0.2 0.16-15.58-15.12-32.09-31.46l-4.53-4.53-4.52-4.46-4.48-4.38a0.77 0.77 0 0 1-0.51-0.26L791.50015 514a1 1 0 0 1 0-1.39l25-25.12a0.57 0.57 0 0 1 0.51 0c2.89-2.89 5.89-5.87 8.89-8.85l4.51-4.47c16.46-16.29 31.96-31.45 32.16-31.45zM862.57015 644.21l49 0.83a1.05 1.05 0 0 1 0 1.39l-49.51 49.88H1023.00015a1 1 0 0 1 1 1v35.55a1.09 1.09 0 0 1-1 1H862.11015l49.51 49.62a1.05 1.05 0 0 1 0 1.39l-49 0.83c-0.2 0.16-15.58-15.12-32.09-31.46l-4.53-4.52-9-8.84a0.74 0.74 0 0 1-0.51 0l-25-25.12a1 1 0 0 1 0-1.39l25-25.12a0.58 0.58 0 0 1 0.51-0.25c20.27-20.23 45.31-44.79 45.57-44.79z"
                      p-id="9379"></path>
                    <path
                      d="M732.16015 21.94c56.9 0.06 103 46.52 103.07 103.84V182a26.93 26.93 0 0 1-13 24.25 26.49 26.49 0 0 1-27.35 0 26.92 26.92 0 0 1-13-24.25v-56a50 50 0 0 0-49.72-50.2H103.07015A50.1 50.1 0 0 0 53.25015 126v772a50.1 50.1 0 0 0 49.82 50.19h629.09A50.1 50.1 0 0 0 782.00015 898v-61.9a26.63 26.63 0 1 1 53.25 0V898a104.36 104.36 0 0 1-30.15 73.53 102.81 102.81 0 0 1-72.92 30.52H103.07015a102.81 102.81 0 0 1-72.93-30.52A104.36 104.36 0 0 1 0.00015 898V126a104.36 104.36 0 0 1 30.14-73.54 102.81 102.81 0 0 1 72.93-30.52z"
                      p-id="9380"></path>
                  </svg>
                  <div style="padding: 14px;background-color: #f2f2f2" @click.stop="tableQuery(item)">
                    <el-row style="margin-bottom: 5px;border-bottom: 1px solid #8f939c;">
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 15px">设备型号
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 15px">设备品牌
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 15px">栏舍编码
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px;">
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;">
                        {{ item.fansType ? item.fansType : '—' }}
                      </el-col>
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;">
                        {{ item.fansBrand ? item.fansBrand : '—' }}
                      </el-col>
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;">
                        {{ item.phouseCode ? item.phouseCode : '—' }}
                      </el-col>
                      <el-col style="display: none">{{ item.fansId }}</el-col>
                    </el-row>
                  </div>

                </el-card>
              </div>

            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2" style="margin-top: 100px">
        <svg class="icon" height="100" p-id="6924" t="1708502371103" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goright">
          <path
            d="M277.845333 1006.933333c-7.850667 0-16.042667-3.072-21.845333-9.216a30.788267 30.788267 0 0 1 0.341333-43.690666l445.781334-441.002667L256 69.973333a30.788267 30.788267 0 0 1 0-43.690666c11.946667-11.946667 31.744-12.288 43.690667 0L768 491.178667c5.802667 5.802667 9.216 13.653333 9.216 21.845333s-3.413333 16.042667-9.216 21.845333L299.690667 998.058667c-6.144 5.802667-13.994667 8.874667-21.845334 8.874666z"
            fill="#dbdbdb" p-id="6925"></path>
        </svg>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11">

        <div style="margin-left: 50px;">
          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="messageParams" size="small">
            <el-form-item label="栏舍编码" prop="queryParams">
              <el-select v-model="messageParams.equipmentPhouseCode" clearable filterable placeholder="请输入设备编码"
                         @change="tableQuery"
              >
                <el-option

                  v-for="item in parkList"
                  :key="item.equipmentPhouseCode"
                  :label="item.equipmentPhouseCode"
                  :value="item.equipmentPhouseCode"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetTable">重置</el-button>
            </el-form-item>
          </el-form>
          <div style="height: 300px; overflow-y: auto; ">
            <el-table
              v-loading="tableLoading"
              :data="messageList"
              height="300"
              style="width: 100%">
              <el-table-column
                fixed
                label="栏舍编码"
                prop="equipmentPhouseCode"
                width="150">
              </el-table-column>
              <el-table-column
                label="栏舍类型"
                prop="phouseType"
                width="100">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.hmy_park_type" :value="scope.row.phouseType"/>
                </template>
              </el-table-column>
              <el-table-column
                label="风速(m/s)"
                prop="equipmentSpeed"
                width="100">
              </el-table-column>
              <el-table-column
                label="时间"
                prop="creationDate"
                width="150">
                <template slot-scope="scope">
                  {{ scope.row.creationDate.slice(0, 16) }}
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <div ref="chart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
    </el-row>


    <!--      保留编辑和删除-->
    <div
      v-if="contextMenuVisible"
      :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
      class="context-menu"
    >
      <ul>
        <li @click="handleUpdate">编辑</li>
        <li @click="handleDelete">删除</li>
      </ul>
    </div>


    <!--    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />-->


    <!-- 添加或修改-->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌" prop="fansBrand">
              <el-input v-model="form.fansBrand" placeholder="请输入品牌"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="fansType">
              <el-input v-model="form.fansType" placeholder="请输入型号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质" prop="fansMaterial">
              <el-input v-model="form.fansMaterial" placeholder="请输入材质"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="fansProduction">
              <el-date-picker
                v-model="form.fansProduction"
                placeholder="请选择生产日期"
                style="width: 280px"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="风机压力" prop="fansPressure">
              <el-select
                v-model="form.fansPressure"
                placeholder="请选择风机压力"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_fans_pressure"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="fansState">
              <el-select
                v-model="form.fansState"
                placeholder="请选择状态"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_fans_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏舍编码" prop="phouseCode">
              <el-select v-model="form.phouseCode" clearable filterable
                         placeholder="请输入设备编码">
                <el-option

                  v-for="item in parkCodeList"
                  :key="item.phouseCode"
                  :label="item.phouseCode"
                  :value="item.phouseCode"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="风速" prop="fansVelocity">
              <el-input v-model="form.fansVelocity" type="number" placeholder="风速(m/s)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重量" prop="fansWeight">
              <el-input v-model="form.fansWeight" type="number" placeholder="重量(kg)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作电压" prop="fansVoltage">
              <el-input v-model="form.fansVoltage" placeholder="请输入电压(单位v)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格" prop="fansPrice">
              <el-input v-model="form.fansPrice" placeholder="请输入价格(单位元)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="维修记录">
          <el-input v-model="form.fansRepair" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="故障记录">
          <el-input v-model="form.fansFault" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>


</template>

<script>

import {add, del, edit, list, selectbyid} from "@/api/hmy/fans";
import {findPhouseCode, findPhouseCodeAll, listEquipment} from "@/api/hmy/equipment";
import * as echarts from "echarts";


export default {
  name: "Purchase",
  dicts: ['hmy_fans_pressure', 'hmy_park_type', 'hmy_fans_state', 'hmy_park_type'],
  data() {
    return {
      intervalId: null, // 用于存储定时器ID的变量
      tableLoading: true,//表格遮罩
      parkCodeList: [],
      parkList: [],
      messageList: [],
      messageParams: {
        pageNum: 1,
        pageSize: 999,
        equipmentPhouseType: "",
        equipmentPhouseCode: ""
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 进货表格数据
      purchaseList: [],
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        fansBrand: "",
        fansType: "",
        phouseCode: ""


      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        fansType: [
          {required: true, message: "编号不能为空", trigger: "blur"},
          {
            validator: async (rule, value, callback) => {
              var fansType = this.form.fansType;
              if (fansType != undefined) {
                await selectbyid(fansType).then(response => {
                  if (response.data != null) {
                    callback(new Error("已存在"))
                  }
                })
              }
            }, trigger: 'blur'
          }
        ],
        fansBrand: [
          {required: true, message: "品牌不能为空", trigger: "blur"}
        ],
        fansMaterial: [
          {required: true, message: "材质不能为空", trigger: "blur"}
        ],
        phouseType: [
          {required: true, message: "栏舍类型不能为空", trigger: "blur"}
        ],
        phouseCode: [
          {required: true, message: "故障记录不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    /** 查询环境信息 */
    // 组件挂载后开始轮询
    this.startPolling();
  },
  beforeDestroy() {
    // 组件销毁前停止轮询
    this.stopPolling();
  },
  methods: {
    fetchEquipment() {
      // 查询环境信息的方法
      listEquipment(this.messageParams).then(response => {
        this.messageList = response.rows;
        console.log(this.messageList);
        this.initChart();
      }).catch(error => {
        // 处理错误情况
        console.error('获取设备列表失败:', error);
      });
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
        }
      );
    },
    startPolling() {
      // 启动轮询的方法
      this.fetchEquipment(); // 首次立即执行
      this.intervalId = setInterval(this.fetchEquipment, 1000 * 5); // 每5秒执行一次
    },
    stopPolling() {
      // 停止轮询的方法
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    filteredParkCodeList() {
      return this.parkCodeList.filter(parkCode => {
        return !this.purchaseList.some(park => park.phouseCode === parkCode.phouseCode);
      });
    },
    resetTable() {
      this.messageParams.equipmentPhouseCode = ""
      this.tableQuery()
    },
    tableQuery(item) {
      console.log(item)
      if (item != null) {
        if (item.phouseCode != null) {
          this.messageParams.equipmentPhouseCode = item.phouseCode
        }
      }
      listEquipment(this.messageParams).then(response => {
          this.messageList = response.rows;
          this.initChart();
        }
      );
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '风机风速',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom:
          {
            show: true,
            realtime: true,
            start: 0,
            end: 5,
            xAxisIndex: [0, 1] // 控制两个 xAxis 的 dataZoom
          },
        xAxis: {
          data: this.messageList.map(item => item.creationDate)
        },
        yAxis:
          {
            name: '风速(m/s)',
            type: 'value',
            min: 0


          },
        series: this.seriesData()
      };
      this.tableLoading = false
      myChart.setOption(option);
    }, /** 动态生成折线图*/
    /** 动态生成折线图系列 */
    seriesData() {
      let series = [];
      this.parkList.forEach(cloud => {
        // 筛选出具有相同设备站房代码的messageList项
        const messageItems = this.messageList.filter(item => item.equipmentPhouseCode === cloud.equipmentPhouseCode);
        // 生成温度数据系列
        const temperatureSeries = {
          name: '风速 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          data: messageItems.map(item => item.equipmentSpeed)
        };

        // 将生成的温度和湿度系列添加到系列数组中
        series.push(temperatureSeries);
      });
      return series;
    },
    goright() {

      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft += 240;
    },
    goleft() {

      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft -= 240;
    },
    handleWheel(event) {
      // 阻止默认的滚动行为
      event.preventDefault();
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      // 计算滚动距离
      const scrollAmount = event.deltaY;
      // 应用滚动距离到滚动容器的横向滚动
      container.scrollLeft += scrollAmount;
    },
    icoeUp(d) {
      if (d.fansState === '1') {
        d.fansState = '2'
      } else {
        d.fansState = '1'
      }
      edit({"fansState": d.fansState, "fansId": d.fansId}).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
          this.purchaseList = response.rows;
          this.total = response.total;
          console.log(this.purchaseList)

        }
      );
      /** 查询环境信息 */
      listEquipment(this.messageParams).then(response => {
          this.messageList = response.rows;
          console.log("环境数据")
          console.log(this.messageList)
          this.initChart();
        }
      );
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
          console.log(this.parkList)
          this.loading = false;
        }
      );
    },
    showContextMenu(event, item) {
      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.selectedContextItem = item;
      this.contextMenuVisible = true;
    },
    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    showDetails(item) {
      selectbyid(item.fansType).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看气体交换机信息";
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        fansId: undefined,
        fansBrand: undefined,
        fansType: undefined,
        fansMaterial: undefined,
        fansPressure: undefined,
        fansWeight: undefined,
        fansVelocity: undefined,
        fansProduction: undefined,
        fansRepair: undefined,
        fansState: undefined,
        fansPrice: undefined,
        fansVoltage: undefined,
        phouseType: undefined,
        phouseCode: undefined,

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      //this.resetForm("queryForm");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.fansId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //添加按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加气体交换机信息";
      findPhouseCodeAll().then(response => {
        this.parkCodeList = response.data;
        this.parkCodeList = this.filteredParkCodeList()
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      selectbyid(item.fansType).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改气体交换机信息";
      });
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.fansId != undefined) {

            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备型号为"' + item.fansType + '"的数据项？').then(function () {
        return del(item.fansType);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },

  }
};
</script>

<!--添加样式-->
<style scoped>
.scroll-container {
  scroll-behavior: smooth;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 防止内部元素换行 */
  margin: 0 auto; /* 覆盖因为 gutter 导致的外边距问题 */
  position: relative;
  max-height: 100%; /* 设置一个最大高度 */
  overflow: hidden; /* 隐藏原生滚动条 */
}

.table-body {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: nowrap; /* 防止子元素换行 */
  margin: 20px 0; /* 根据需要调整内边距 */
}

.table-body .el-col {
  flex: 0 0 auto; /* 避免 flex 子项被压缩 */
  white-space: normal; /* 使列内的内容正常换行 */
}

.emessage-div {
  transition: transform 0.3s; /* 设置动画过渡效果 */
}

.emessage-div:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大1.5倍 */
}

.table-header .header-item:nth-child(odd), .table-body .row-item:nth-child(odd) {
  background-color: #f2f2f2; /* 奇数行背景色 */
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

.parent-icon {
  position: relative;
}

.green-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: green;
  z-index: 9;
}

.rea-icon {
  position: absolute;
  font-size: 20px;
  right: 15px;
  top: 15px;
  color: red;
  z-index: 9;
}

</style>
